<template>
  <view>
    <view class="item" v-for="(item,index) in songList" :key="item.id" @tap="navToPlay(item.id)">
      <text class="item-num">{{index+1}}</text>
      <view class="song-singer">
        <text class="song showSigle" :style="'color:'+namecolor+';'">{{item.name}}</text>
        <view class="singer">
          <text class="iconfont icon-vip1"></text>
          <text class="showSigle" :style="'color:'+iconsingercolor+';'">{{item.ar[0].name}}-{{item.al.name}}</text>
        </view>
      </view>
      <text class="iconfont icon-bofang" :style="'color:'+iconsingercolor+';'"></text>
    </view>
  </view>
</template>

<script>
  export default {
    name:"common-song-item",
    props:['namecolor','iconsingercolor','songList'],
    data() {
      return {
      };
    },
    methods:{
      // 跳转到播放页面
      navToPlay(id){
        console.log('歌曲id',id);
        uni.navigateTo({
          url:`../../pages/play/play?id=${id}`
        })
      }
    }
  }
</script>

<style scoped>
.item{
    display: flex;
    align-items: center;
    margin-top: 64rpx;
  }
  .item .item-num{
    position:relative;
    color: #a7a7a7;
    font-size: 28rpx;
    margin-right: 50rpx;
  }
  .item .song-singer{
    flex: 1;
  }
  .item .song-singer .song{
    font-size: 28rpx;
    color: #2e2e2e;
  }
  .item .song-singer .singer{
    display: flex;
    align-items: center;
    font-size: 20rpx;
    color: #A7A7A7;
  }
  .icon-vip1{
    color: red;
  }
  .item .icon-bofang{
    font-size: 52rpx;
    color: #A7A7A7;
  }
  
  /* 单行显示 */
  .showSigle{
    width: calc(100vw - 268rpx);
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
</style>
